<!DOCTYPE html>
<html>

<head>
    <title>SparkLine</title>
    <!--=include _head.html -->
    <script src="../libs/jquery.sparkline.min.js" charset="utf-8"></script>
    <style>
        span {
            display: block;
        }
    </style>
</head>
<!-- 
一个内嵌数据图形可视化的图表库
 -->

<body class="fa-layout">
    <div class="layui-fluid">
        <blockquote class="layui-elem-quote layui-quote-nm">
            SparkLines是Jquery的插件，拥有peity相似的功能。
            <a href="https://omnipotent.net/jquery.sparkline/" class="layui-btn layui-btn-sm" target="_blank">了解更多</a>
        </blockquote>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">折线图</div>
                    <div class="layui-card-body">
                        <span class="lines spark-line">Loading..</span>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">柱状图</div>
                    <div class="layui-card-body">
                        <span class="bars spark-line">Loading..</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">柱状堆积图</div>
                    <div class="layui-card-body">
                        <span class="inlineBar spark-line"></span>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">饼图</div>
                    <div class="layui-card-body fa-align-center">
                        <span class="pie "></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var myvalues = [];
    var data2 = [];
    for (let i = 1; i <= 200; i++) {
        let a = Math.floor(Math.random() * 1000);
        let b = Math.floor(Math.random() * 1000);
        myvalues.push(a);
        data2.push([a, b]);
    }
    $('.lines').sparkline(myvalues, {});
    $('.bars').sparkline(myvalues.slice(120), { type: 'bar', barColor: 'green' });
    $('.inlineBar').sparkline(data2.slice(110), { type: 'bar', barColor: 'pink', height: 200 });
    $('.pie').sparkline(myvalues.slice(190), { type: 'pie', barColor: 'green', height: 200 });
</script>

</html>